var layer = layui.layer
// 1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");
// 1.2 配置选项
let options = {
  // 纵横比
  aspectRatio: 1,
  preview: ".preview",
};
// 1.3 创建裁剪区域
$image.cropper(options);



$('#btnChooseImage').on('click', function () {
  $('#file').click()
})

// =============================  更换剪裁区的图片 =============================

// 当文件域的内容改变的时候，更换图片
$('#file').change(function () {
  // 1. 找到选择的图片（文件对象）
  let fileObj = this.files[0]; // 我们选择的图片的文件对象
  if (!fileObj) {
    return layer.msg('请选择文件');
  }

  // 2. 根据文件对象，生成一个临时的url，用于访问被选择的图片
  let url = URL.createObjectURL(fileObj);

  // 3. 更换剪裁区的图片的src属性
  // - 销毁原理的剪裁区
  // - 更换图片
  // - 重新创建剪裁区
  $image.cropper('destroy').attr('src', url).cropper(options);
});


// ---------------  点击 确定 的时候，剪裁图片，转成base64格式，提交字符串到接口 ----------
$('#btnCreateAvatar').click(function () {
  // 剪裁得到一张图片（canvas图片）
  let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 100,
    height: 100
  });

  // 把图片转成base64格式
  let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
  console.log("dataURL:", dataURL)
  // axios
  axios
    .post("/my/update/avatar", "avatar=" + encodeURIComponent(dataURL))
    .then(({data:{status,message}}) => {
      // 提示
      if (status !== 0) {
        // 失败
        return layer.msg(message);
      }

      layer.msg("更新头像成功");
      // 页面中的头像发生变化（更新）
      window.parent.fn();
    });
});

